<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
	<meta name="format-detection" content="telephone=no, email=no"/>
	<meta charset="UTF-8">
	<title>萌宝</title>
	<link rel="stylesheet" href="themes/css/core.css">
	<link rel="stylesheet" href="themes/css/icon.css">
	<link rel="stylesheet" href="themes/css/home.css">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">
	<style>
		.aui-new-search-tab .aui-active:after {
			display: block;
			background-size: 8px 8px;
			content: "";
			display: inline-block;
			width: 8px;
			height: 9px;
			margin-left: 4px;
			position: absolute;
			left: 58px;
			top: 14px;
		}
		.aui-new-search-tab .aui-active:after {
			display: block;
			background-size: 8px 8px;
			content: "";
			display: inline-block;
			width: 8px;
			height: 9px;
			margin-left: 4px;
			position: absolute;
			left: 58px;
			top: 14px;
		}
	</style>
</head>
<body>
	<div id="vue">
		<header class="aui-header-default aui-header-fixed ">
			<a href="javascript:history.back(-1);" class="aui-header-item">
				<i class="aui-icon aui-icon-back"></i>
			</a>
			<div class="aui-header-center aui-header-center-clear">
				<div class="aui-header-search-box">
					<i class="aui-icon aui-icon-small-search"></i>
					<form action="">
					   <input id="searchfor" type="searchfor"  placeholder="" onkeyup="if(event.keyCode==13) {fn()}" class="aui-header-search">
					</form>
				</div>
			</div>
			<a href="#" class="aui-header-item-icon">
				<!--<i class="aui-icon aui-icon-packet"></i>-->
				<!--<i class="aui-icon aui-icon-member"></i>-->
			</a>
		</header>
		<section class="aui-new-search-content">
			<div class="aui-new-search-tab">
				<ul id="liang">
					<li>
						<span class="aui-active">综合</span>
					</li>
					<li>
						<span>销量</span>
					</li>
					<li>
						<span>价格</span>
					</li>
					<li>
						<span>推广量</span>
					</li>
				</ul>
			</div>
			<div class="aui-custom-search-tab">
				<ul id="soter">
					<li>
						<span class="aui-active">升序</span>
					</li>
					<li>
						<span>降序</span>
					</li>
				</ul>
			</div>
		</section>
		<section class="aui-list-product">
			<div class="aui-list-product-float-item">
				<a class="aui-list-product-fl-item" v-for="item in productList" :key="item.item_id" @click="goDetail(item)">
					<div class="aui-list-product-fl-img" style="width: 8rem;">
						<img :src="item.pict_url" alt="">
					</div>
					<div class="aui-list-product-fl-text">
						<h3 class="aui-list-product-fl-title" style="font-weigh:bold;">{{item.title}}</h3>
						<h2 class="aui-list-product-fl-title" style="font-weigh:bold;color: red;">{{item.coupon_info}}</h2>
						<div class="aui-list-product-fl-mes">
							<div>
								<span class="aui-list-product-item-price">
									<em>¥</em>
									{{item.zk_final_price}}
								</span>
								<span class="aui-list-product-item-del-price">
									¥{{item.reserve_price}}
								</span>
							</div>
							<div class="aui-btn-purchase">
								99%好评
							</div>

						</div>
						<div class="aui-list-self-sell">
							<span class="aui-self-sell" v-if="item.user_type == 0">集市</span>
							<span class="aui-self-sell" v-else>天猫</span>
							<em class="aui-self-sell-em">{{item.shop_dsr}}条评价</em>
						</div>

					</div>
				</a>
			</div>
			<p style="width: 50px;margin: 5px auto;">加载中...</p>
		</section>
	</div>
	<script type="text/javascript" src="themes/js/jquery.min.js"></script>
	<script type="text/javascript" src="themes/js/aui.js"></script>
	<script type="text/javascript" src="themes/vue2/vue.js"></script>
	<script type="text/javascript" src="themes/js/base.js"></script>
    <script>

		$(function () {
            $("#searchfor").val(localStorage.getItem("searchfor"));
        })

        function fn() {
            var searchfor = $("#searchfor").val();
            localStorage.setItem("searchfor",searchfor);
            $("#searchfor").val(localStorage.getItem("searchfor"));
            vue.getProductList();
        }


        /**
		 * ，销量（total_sales），淘客佣金比率（tk_rate），
		 * 累计推广量（tk_total_sales），总支出佣金（tk_total_commi），价格（price）
         */
        var vue = new Vue({
            el: '#vue',
            data: {
                productList:[],
                items: 1,
                b:true,
                order:'_asc', //排序_des（降序），排序_asc（升序）
                orderType:'',
                sort:'',
            },
            created:function () {   //实例初始化创建完成执行
                this.getProductList();
                window.addEventListener('scroll', this.onScroll);
            },
            methods:{              //定义封装方法
                onScroll() {
                    //可滚动容器的高度
                    let innerHeight = document.querySelector('#vue').clientHeight;
                    //屏幕尺寸高度
                    let outerHeight = document.documentElement.clientHeight;
                    //可滚动容器超出当前窗口显示范围的高度
                    let scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
                    //scrollTop在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight < (outerHeight + scrollTop)的情况，严格来讲，是接近底部。
                    console.log(innerHeight + " " + outerHeight + " " + scrollTop);
                    if ((innerHeight-110) < (outerHeight + scrollTop)) {
                        if(!this.b){
                            return;
                        }
                        //加载更多操作
                        console.log("loadmore："+this.items);
                        this.items += 1;
                        this.b = false;
                        this.getProductList();
                    }
                },
                //获取列表
                getProductList:function () {
                    var self = this;
                    self.sort = self.orderType + self.order;
                    $.ajax({
                        type:"POST",
                        url:CTX+"/open/h5/tbk/getProductList",
                        dataType:"JSON",
                        data:{
                            cat: localStorage.getItem("cId"),
                            q:localStorage.getItem("searchfor"),
                            pageNo:self.items,
                            sort:self.sort
                        },
                        success:function(data){
                            if (data.code == 0) {
                                var list = self.productList;
                                var plist = data.data.tbk_dg_material_optional_response.result_list.map_data;
                                var arrList = list.concat(plist);
                                self.productList = arrList;
                                self.b = true;
                            } else {

                            }
                        }
                    });
                },
				goDetail(item){
                    if(item.coupon_share_url == null || item.coupon_share_url== ''){
                        window.location.href = item.url;
					}else{
                        window.location.href = item.coupon_share_url;
					}
				}
            },
            watch:{     //监听器

            }

        })

		$("#liang li").click(function () {
            $("#liang li span").removeClass("aui-active");
            $(this).find("span").addClass("aui-active");
            if($(this).index() == 1){
               vue.orderType = "total_sales";
			}
            if($(this).index() == 2){
                vue.orderType = "price";
            }
            if($(this).index() == 3){
                vue.orderType = "tk_total_sales";
            }
            vue.getProductList();
        })

        $("#soter li").click(function () {
            $("#soter li span").removeClass("aui-active");
            $(this).find("span").addClass("aui-active");
            if($(this).index() == 0){
                vue.order = "_asc";
            }
            if($(this).index() == 1){
                vue.order = "_desc";
            }
            vue.getProductList();
		})


        // $(function () {
        //     $(".aui-new-search-tab .aui-active:after").css("background-image","");
        // })


	</script>
</body>
</html>